{% extends "personal_center/base.html" %}
{% load state_display %}
{% block page_link %}
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/index.css">
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/common.css">
    <script type="text/javascript" src="../../static/personal_center/js/index.js"></script>
{#    <link type="text/css" rel="stylesheet" href="../../static/personnel/TimeSelector/skin/jedate.css">#}
{#    <script type="text/javascript" src="../../static/personnel/TimeSelector/src/jedate.js"></script>#}
    <link rel="stylesheet" href="../../static/forum/jqueryDatePicker/font_file.css">
    <link rel="stylesheet" href="../../static/forum/jqueryDatePicker/index.css">
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }
        .wrap{
            line-height: 40px;
            height: 35px;
            border: 1px solid #0d8ddb;
            width: 300px;
            margin-top: 2.5px;
            display: flex;
            transition: border-color .2s;
            border-radius: 4px;
            margin-right: 10px;
        }
        .wrap:hover{
            border-color: #c0c4cc;
        }
        .wrap:active{
            border-color: #66b1ff;
        }
        .wrap.active{
            border-color: #66b1ff;
        }
        .wrap > div{
            flex: 1;
            padding: 0 10px;
            display: flex;
            cursor: pointer;
        }
        .wrap .ali-iconfont{
            display: inline-block;
            width: 20px;
            text-align: center;
            margin-right: 5px;
        }
        .wrap-l-starTime, .wrap-l-endTime{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .wrap [name="startTime"], .wrap [name="endTime"]{
            flex: 1;
            width: 100%;
            height: 95%;
        }
        .wrap [name="startTime"], .wrap [name="endTime"], .wrap [name="startTime"]:focus, .wrap [name="endTime"]:focus{
            border: none;
            outline: none;
            cursor: pointer;
        }
        .button_style {
            width: 70px;border: #cfcfcf solid 0.5px;background: #cfcfcf;border-radius: 3px;margin-left: 10px;display: inline-block;vertical-align: top;
        }
        .button_style_active {
            width: 70px;border-radius: 3px;margin-left: 10px;display: inline-block;vertical-align: top;border: #00a0e9 solid 0.5px;background: #00a0e9;color: white;
        }
    </style>
{% endblock %}


{% block right_content %}
    <div id="new_issues" style="width: 100%;height: 100%;overflow: auto;background-color: white;">
        <div style="width: 100%;height: 40px;font-size: 0;padding-right: 15px;">
            <div style="float: right;margin-left: 20px;">
                <input type="text" id="search_value" name="search_val" style="width: 300px;display: inline-block;border-bottom-left-radius: 3px;border-top-left-radius: 3px;border: #0d8ddb solid 1px;vertical-align: top;font-size: 14px;padding-left: 2px;margin-top: 2.5px;height: 35px;outline: none;" placeholder="请输入搜索关键词">
                <button class="search-action" style="width: 100px;border-bottom-right-radius: 3px;border-top-right-radius: 3px;display: inline-block;font-size: 14px;border: #0d8ddb solid 1px;border-left: none;background: #0d8ddb;color: white;margin-top: 2.5px;height: 35px;margin-right: 15px;outline: none;cursor: pointer;margin-left: -1px;">搜索</button>
            </div>
            <div style="float: right;height: 40px;margin-left: 20px;line-height: 40px;font-size: 14px;">
                <div class="wrap">
                    <div class="wrap-l">
                        <i class="ali-iconfont ali-iconshizhong" style="margin-top: -3px;"></i>
                        <div class="wrap-l-starTime">
                            <input name="startTime" id="startTime" type="text" placeholder="开始日期" autocomplete="off">
                        </div>

                    </div>
                    <div class="wrap-r">
                        <i class="ali-iconfont ali-iconshizhong" style="margin-top: -3px;"></i>
                        <div class="wrap-l-endTime">
                            <input name="endTime" id="endTime" type="text" placeholder="结束日期" autocomplete="off">
                        </div>
                    </div>
                </div>
            </div>
            <div style="height: 30px;vertical-align: top;margin-right: 15px;font-size: 14px;float: right;margin-top: 7.5px;" id="flow_status_choose">
                <button class="button_style" name="button_style" onclick="ChooseFlow('1', this)">传阅中</button>
                <button class="button_style" name="button_style" onclick="ChooseFlow('2', this)">完结</button>
            </div>
        </div>

        <div id="my_application" style="width: 100%;height: 95.3%;overflow: auto;background-color: white;">
            <div class="right-box" style="width: 100%;height: 100%;margin-top: 0;">
                <div style="height: 100%;width: 100%;overflow: auto;border-bottom: #cccccc solid 1px;background-color: white;">
                    <section class="grid-main" style="height: 100%;">
                        <table id="main_table"></table>
                    </section>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script src="../../static/personnel/js/jquery-1.11.1.min.js"></script>
{#    <script type="text/javascript" src="../../static/administrative/js/layer.js"></script>#}
{#    <script type="text/javascript" src="../../static/personnel/TimeSelector/test/demo.js"></script>#}
    <script src="../../static/forum/jqueryDatePicker/moment.js"></script>
    <script src="../../static/forum/jqueryDatePicker/datePicker.min.js"></script>
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("personage").className = "add_class";
            document.getElementById("superior").className = "add-nav-active";
            document.getElementById("SystemReport").style.display='block';
            document.getElementById("ReportIco").className = "iconfont icon-jiantou-xia";
        };

        const gridManagerName = "test",
        TYPE_MAP = {1: "HTML/CSS", 2: "nodeJS", 3: "javaScript", 4: "前端鸡汤", 5: "PM Coffee", 6: "前端框架", 7: "前端相关"},
        arg = {
            gridManagerName: "test",
            width: "100%",
            height: "100%",
            autoOrderConfig: {fixed: "left"},
            checkboxConfig: {key: "id", fixed: "left"},
            supportAjaxPage: !0,
            sortMode: "single",
            supportMenu: !0,
            menuHandler: e => (e.unshift({
                content: "自定义菜单", line: !0, onClick: e => {
                    alert(e)
                }
            }), e),
            useCellFocus: !0,
            useHideRow: !0,
            supportMoveRow: !0,
            moveRowConfig: {
                key: "priority", useSingleMode: !0, fixed: "left", handler: (e, t) => {
                    console.log(e, t)
                }
            },
            disableCache: !1,
            ajaxData: function (e, t) {
                var local_host = window.location.host;          // 获取当前IP
                return "/forum/SuperiorOfficial.html"
            },
            exportConfig: {
                fileName: e => {
                    const t = new Date;
                    let a = `${t.getFullYear()}-${t.getMonth() + 1}-${t.getDate()}`;
                    for (let t in e) a = `${a}-${t}=${e[t]}`;
                    return a
                }, suffix: "xls"
            },
            ajaxType: "POST",
            checkedBefore: function (e, t, a) {
                return console.log("checkedBefore==", e, t, a), a && 90 === a.id && alert("该节点在checkedBefore中配置为不可选"), a && 90 !== a.id
            },
            responseHandler: e => (e.data.forEach((e => {
                e.priority = e.id
            })), e),
            rowRenderHandler: (e, t) => e,
            emptyTemplate: e => `<div style="text-align: center;">${e.query.title ? "搜索为空" : "暂无数据"}</div>`,
            columnData: [
                {
                    key: "create_time",
                    text: "时间",
                    align: "center",
                }, {
                    key: "recive_number",
                    text: "收文编号",
                    align: "center",
                }, {
                    key: "send_company",
                    text: "来文单位",
                    align: "left",
                }, {
                    key: "send_number",
                    text: "文号",
                    align: "center",
                }, {
                    key: "title",
                    text: "标题",
                    align: "center",
                }, {
                    key: "ReviewLeaders",
                    text: "批阅领导",
                    align: "center",
                }, {
                    key: "ReviewComments",
                    text: "批阅意见",
                    align: "center",
                }]
        }, demo1 = {
            initSearch: function () {
            }, initFN: () => {
                document.querySelector(".search-action").addEventListener("click", (function () {
                    var data_value = document.getElementById("search_value").value;
                    var startTime = document.getElementById("startTime").value;
                    var endTime = document.getElementById("endTime").value;
                    var e = {
                        search_data: data_value,
                        startTime: startTime,
                        endTime: endTime,
                    };
                    table.GM("setQuery", e, (function () {
                        console.log("setQuery执行成功")
                    }))
                 }))
            }, initGM: function () {
                new window.GridManager(table, arg, (e => {
                    console.log("渲染完成后的回调函数:", e), console.log(arg.columnData)
                }))
            }, editRowData: function (e) {
                window.GridManager.updateRowData("test", "id", {
                    id: window.parseInt(e.getAttribute("data-id")),
                    lastDate: (new Date).getTime()
                })
            }
        }, table = document.querySelector("#main_table");
        demo1.initSearch(table), demo1.initGM(table), demo1.initFN();

        var fastTime = {
            true: {
                4: { // 双日历天、小时的快速选择格式
                    '最近7天': { startTime: moment().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().format('YYYY-MM-DD HH:mm:ss') },
                    '最近一个月': { startTime: moment().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().format('YYYY-MM-DD HH:mm:ss') },
                    '最近三个月': { startTime: moment().subtract(3, 'month').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().format('YYYY-MM-DD HH:mm:ss') }
                },
                5: { // 双日历天、小时的快速选择格式
                    '最近7天': { startTime: moment().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().format('YYYY-MM-DD HH:mm:ss') },
                    '最近一个月': { startTime: moment().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().format('YYYY-MM-DD HH:mm:ss') },
                    '最近三个月': { startTime: moment().subtract(3, 'month').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().format('YYYY-MM-DD HH:mm:ss') }
                },
                6: { // 双日历周的快速选择格式
                    '本周': { startTime: moment().startOf('week').subtract(0, 'week').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('week').format('YYYY-MM-DD HH:mm:ss') },
                    '最近2周': { startTime: moment().startOf('week').subtract(2, 'week').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('week').format('YYYY-MM-DD HH:mm:ss') },
                    '最近4周': { startTime: moment().startOf('week').subtract(4, 'week').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('week').format('YYYY-MM-DD HH:mm:ss') },
                    '最近8周': { startTime: moment().startOf('week').subtract(8, 'week').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('week').format('YYYY-MM-DD HH:mm:ss') },
                },
                7: { // 双日历月的快速选择格式
                    "本月": { startTime: moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('month').format('YYYY-MM-DD HH:mm:ss')},
                    "本年": { startTime: moment().startOf('year').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('month').format('YYYY-MM-DD HH:mm:ss')},
                    "最近六个月": { startTime: moment().startOf('month').subtract(6, 'month').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('month').format('YYYY-MM-DD HH:mm:ss')}
                },
                8:{ // 双日历季的快速选择格式
                    "本季度": { startTime: moment().startOf('quarter').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('quarter').format('YYYY-MM-DD HH:mm:ss')},
                    "今年至今": { startTime: moment().startOf('year').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('quarter').format('YYYY-MM-DD HH:mm:ss')},
                    "上一季度": { startTime: moment().subtract(1, 'quarter').startOf('quarter').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().subtract(1, 'quarter').endOf('quarter').format('YYYY-MM-DD HH:mm:ss')}
                },
                9: { // 双日历年的快速选择格式
                    "今年": { startTime: moment().startOf('year').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('year').format('YYYY-MM-DD HH:mm:ss')},
                    "近一年": { startTime: moment().subtract(1, 'year').startOf('year').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('year').format('YYYY-MM-DD HH:mm:ss')},
                    "近二年": { startTime: moment().subtract(2, 'year').startOf('year').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('year').format('YYYY-MM-DD HH:mm:ss')},
                    "近十一年": { startTime: moment().subtract(11, 'year').startOf('year').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('year').format('YYYY-MM-DD HH:mm:ss')}
                }
            },
            false: {
                    4: {  // 单日历天和小时的快速时间选择格式
                        '今天': { startTime: moment().format('YYYY-MM-DD HH:mm:ss') },
                        '昨天': { startTime: moment().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss') },
                        '一周前': { startTime: moment().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss') },
                    },
                    5: {  // 单日历天和小时的快速时间选择格式
                        '今天': { startTime: moment().format('YYYY-MM-DD HH:mm:ss') },
                        '昨天': { startTime: moment().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss') },
                        '一周前': { startTime: moment().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss') },
                    },
                    6: { // 单日历周的快速选择格式
                        '本周': { startTime: moment().startOf('week').subtract(0, 'week').format('YYYY-MM-DD HH:mm:ss')},
                        '上一周': { startTime: moment().startOf('week').subtract(1, 'week').format('YYYY-MM-DD HH:mm:ss')},
                        '上二周': { startTime: moment().startOf('week').subtract(2, 'week').format('YYYY-MM-DD HH:mm:ss')},
                    },
                    7: {  // 单选日历月的快速时间选择格式
                        '当前月': { startTime: moment().startOf('month').format('YYYY-MM-DD HH:mm:ss') },
                        '一个月前': { startTime: moment().startOf('month').subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss') },
                        '半年前': { startTime: moment().startOf('month').subtract(6, 'month').format('YYYY-MM-DD HH:mm:ss') },
                        '一年前': { startTime: moment().startOf('month').subtract(12, 'month').format('YYYY-MM-DD HH:mm:ss') },
                    },
                    8: {  // 单选日历季的快速时间选择格式
                        '本季度': { startTime: moment().startOf('quarter').format('YYYY-MM-DD HH:mm:ss') },
                        '上一季度': { startTime: moment().startOf('quarter').subtract(1, 'quarter').format('YYYY-MM-DD HH:mm:ss') },
                        '上二季度': { startTime: moment().startOf('quarter').subtract(2, 'quarter').format('YYYY-MM-DD HH:mm:ss') },
                    },
                    9: {  // 单选日历年的快速时间选择格式
                        '今年': { startTime: moment().startOf('year').format('YYYY-MM-DD HH:mm:ss') },
                        '去年': { startTime: moment().startOf('year').subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss') },
                        '前年': { startTime: moment().startOf('year').subtract(2, 'year').format('YYYY-MM-DD HH:mm:ss') },
                    },
            }

        }

        $('.wrap').on('click', function () {
            var _this = this;
            var reportTimeType = 4;
            var double = true;
            if(!$(this).next('[name="datePicker"]').length) {
                $(this).after("<div class='datePicker-x' name='datePicker' style='position: fixed;z-index: 1000;background: white;'></div>");
                    datePicker = $('.datePicker-x').datePicker({
                        reportTimeType: reportTimeType, // 4代表小时、5代表天、6代表周、7代表月、8代表季、9代表年
                        startDom: $(_this).find('input[name="startTime"]'),  // 开始时间要赋值的DOM元素
                        endDom: $(_this).find('input[name="endTime"]'),  // 结束时间要赋值的DOM元素
                        format: 'YYYY-MM-DD',
                        fastTime: fastTime[double][reportTimeType], // 快速选择的时间
                        isFast: true,   // 是否显示快速选择的选项
                        isDouble: double,   // 是否双选择的日历
                        disabledDate: false,    // 是否禁用以后的时间
                        yes: function (startTime, endTime) {    // 成功赋值前的回调可改变赋值的时间格式
                        },
                    });
            }else {
                if($(this).next('[name="datePicker"]').hasClass('hide')) {
                    $(this).next('[name="datePicker"]').removeClass('hide');
                    datePicker.render();
                }else {
                    $(this).next('[name="datePicker"]').addClass('hide');

                }
            }
        });

        function ChooseFlow(flow_name, this_) {
            var data_value = document.getElementById("search_value").value;
            var startTime = document.getElementById("startTime").value;
            var endTime = document.getElementById("endTime").value;
            var search_time = startTime + " 至 " + endTime;
            var e = {
                search_data: data_value,
                search_time: search_time,
                flow_name: flow_name
            };
            table.GM("setQuery", e, (function () {
                console.log("setQuery执行成功")
            }))
            var button_style_list = document.getElementsByName("button_style");
            for (var i=0; i<button_style_list.length; i++) {
                button_style_list[i].className = "button_style";
            }
            this_.className = "button_style_active";
        }
    </script>
{% endblock %}
